import React from "react";
import { Table } from "antd";
import { NavLink } from "react-router-dom";

const pagination = { position: "bottom" };

var total = 0;

export default class Cart extends React.Component {
  state = {
    pagination,
    num: 0
  };

  rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      total = 0;
      if (selectedRows && selectedRows.length > 0) {
        selectedRows.map(function(value) {
          total += value.price * value.num;
        });
      }
      this.setState({
        num: total
      });
    },
    getCheckboxProps: record => ({
      disabled: record.name === "Disabled User",   // Column configuration not to be checked
      name    : record.name
    })
  };

  render() {
    const { carts, addToCart, reduceToCart, boo } = this.props;
    const columns                                 = [
      {
        title    : "标题",
        dataIndex: "title",
        key      : "title",
        width    : 50
      },
      {
        title    : "图片",
        dataIndex: "img",
        key      : "img",
        width    : 50,
        render   : (text, record) => (
          <div>
            <img src={text} width="100px" />
          </div>
        )
      },
      {
        title    : "简介",
        dataIndex: "text",
        key      : "text",
        width    : 200,
        render   : (text, record) => (
          <div
            style = {{ height: "60px", lineHeight: "20px", overflow: "hidden" }}
          >
            {text}
          </div>
        )
      },
      {
        title    : "单价",
        key      : "price",
        dataIndex: "price",
        width    : 30
      },
      {
        title    : "数量",
        key      : "num",
        dataIndex: "num",
        width    : 30,
        render   : (text, record) => (
          <span>
            <button onClick={() => reduceToCart(record)}>-</button> {text}{" "}
            <button onClick={() => addToCart(record)}>+</button>
          </span>
        )
      },
      {
        title : "小计",
        key   : "action",
        width : 70,
        render: (text, record) => <span>{text.price * text.num}</span>
      }
    ];
 

    var arr = carts.filter((value, index) => {
      return value;
    });
    arr.map((value, index) => {
      value.key = index;
    });
    let pagination = {
      total          : carts.length,
      defaultCurrent : 1,
      pageSize       : 5,
      showSizeChanger: true
    };
    if (boo) {
      return (
        <div>
          <Table
            dataSource   = {arr}
            rowSelection = {this.rowSelection}
            columns      = {columns}
            pagination   = {pagination}
          />
          <div style={{width:'100%',height:'30px',lineHeight:'30px',paddingRight:'136px',textAlign:'right',background:'#eee',marginBottom:'60px',fontWeight:'bold'}}>总计：{this.state.num}</div>
        </div>
      );
    } else {
      return (
        <div>
          <NavLink to="/login">请先登录！</NavLink>
        </div>
      );
    }
  }
}
